<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="wpoceans">

    <!-- Page Title -->
    <title>Varaus</title>

    <!-- Icon fonts -->
    <link href="${pageContext.request.contextPath}/css/themify-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/flaticon.css" rel="stylesheet">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- Plugins for this template -->
    <link href="${pageContext.request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/owl.carousel.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/owl.theme.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/slick.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/slick-theme.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/odometer-theme-default.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/owl.transitions.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/jquery.fancybox.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/magnific-popup.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/nice-select.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="home">

    <!-- start page-wrapper -->
    <div class="page-wrapper">

         <!-- start preloader -->
           <div class="preloader">
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div class="bounce3"></div>
                </div>
            </div>
            <!-- end preloader -->
        <!-- Start header -->
        <header id="header" class="site-header header-style-2">
            <nav class="navigation navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="open-btn">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="index.jsp"><img src="${pageContext.request.contextPath}/images/logo-2.png" alt=""></a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse navigation-holder">
                        <button class="close-navbar"><i class="ti-close"></i></button>
                        <ul class="nav navbar-nav">
                            <li class="menu-item-has-children">
                            <li><a href="${pageContext.request.contextPath}/index.jsp">首页</a></li>
                            </li>
                            <li class="menu-item-has-children">
                            <li><a href="${pageContext.request.contextPath}/frontController/allRoom">全部房间</a></li>
                            </li>
                            <li class="menu-item-has-children">
                            <li><a href="${pageContext.request.contextPath}/frontController/roomSingle">房间详情</a></li>
                            </li>
                            <li class="menu-item-has-children">
                            <li><a href="${pageContext.request.contextPath}/frontController/service">酒店服务</a></li>
                            </li>
                        </ul>
                    </div><!-- end of nav-collapse -->

                    <div class="cart-search-contact">
                        <div class="get-quote">
                            <a href="#"><i class="fi flaticon-support-1"></i>Call : +0123-456-789</a>
                        </div>
                        <c:if test="${sessionScope.user == null}">
                            <div class="header-search-form-wrapper">
                                <a href="${pageContext.request.contextPath}/userInfoController/login"><button class="theme-btn-s2">登录</button></a>
                            </div>
                            <div class="header-search-form-wrapper">
                                <a href="${pageContext.request.contextPath}/userInfoController/login"><button class="theme-btn-s2">注册</button></a>
                            </div>
                        </c:if>
                        <c:if test="${sessionScope.user != null}">
                            <button class="theme-btn-s2">
                                <!-- 这儿放头像 -->
                                <!-- 默认头像 -->
                                <c:if test="${sessionScope.user.userImg ==null}">
                                    <img id='uimg' src="#"/>
                                </c:if>
                                <!-- 自定义头像 -->
                                <c:if test="${sessionScope.user.userImg !=null}">
                                    <img id='uimg'   src="${pageContext.request.contextPath }/DownLoadController/download/?filename=${sessionScope.user.userImg}" />
                                </c:if>
                            </button>
                            <button class="theme-btn-s2" style="background-color: rgb(17,70,130);">${sessionScope.user.userName}</button>
                            <a href="${pageContext.request.contextPath}/frontController/userCenter"><button class="theme-btn-s2" style="background-color: rgb(17,70,130);">资料</button></a>
                            <a href="${pageContext.request.contextPath}/userInfoController/exit"><button class="theme-btn-s2" style="background-color: rgb(17,70,130);">退出</button></a>
                        </c:if>
                    </div>
                </div><!-- end of container -->
            </nav>
        </header>
        <!-- end of header -->
        <!-- start page-title -->
        <section class="page-title">
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12">
                        <h2>Service</h2>
                        <ol class="breadcrumb">
                            <li><a href="index.jsp">Home</a></li>
                            <li>Service</li>
                        </ol>
                    </div>
                </div> <!-- end row -->
            </div> <!-- end container -->
        </section>
        <!-- end page-title -->
        

         <!-- service-area start -->
        <div class="service-area section-padding">
            <div class="container">
                <div class="col-12">
                    <div class="wpo-section-title">
                        <span>Our Services</span>
                        <h2>What We Offer For You</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-tray"></i>
                            </div>
                            <div class="service-text">
                                <h2>Delicious Food</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-pool"></i>
                            </div>
                            <div class="service-text">
                                <h2>Swimming Pool</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-herbal"></i>
                            </div>
                            <div class="service-text">
                                <h2>Spa salon</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-bowling"></i>
                            </div>
                            <div class="service-text">
                                <h2>Game Room</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-taxi"></i>
                            </div>
                            <div class="service-text">
                                <h2>Airport Taxi</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                    <div class="col col-md-4 col-sm-6 custom-grid col-12">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fi flaticon-bowling"></i>
                            </div>
                            <div class="service-text">
                                <h2>Breakfast</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- service-area start -->


        <!-- start wpo-site-footer -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="wpo-footer-top">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
                                <div class="logo widget-title">
                                    <img src="${pageContext.request.contextPath}/images/logo.png" alt="blog">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-12 custom-grid">
                                <ul>
                                    <li><a href="#"><i class="ti-facebook"></i></a></li>
                                    <li><a href="#"><i class="ti-twitter-alt"></i></a></li>
                                    <li><a href="#"><i class="ti-instagram"></i></a></li>
                                    <li><a href="#"><i class="ti-google"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-middle">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-3 col-md-3 col-sm-6">
                                <div class="widget market-widget wpo-service-link-widget">
                                    <div class="widget-title">
                                        <h3>Contact </h3>
                                    </div>
                                    <p>online store with lots of cool and exclusive features</p>
                                    <div class="contact-ft">
                                        <ul>
                                            <li><i class="fi ti-location-pin"></i>28 Street, New York City, USA</li>
                                            <li><i class="fi ti-mobile"></i>+000123456789</li>
                                            <li><i class="fi flaticon-email"></i>Hastium@gmail.com</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-6">
                                <div class="widget link-widget resource-widget">
                                    <div class="widget-title">
                                        <h3>Destination</h3>
                                    </div>
                                    <div class="news-wrap">
                                        <div class="news-img">
                                            <img src="${pageContext.request.contextPath}/images/footer/img-1.jpg" alt="">
                                        </div>
                                        <div class="news-text">
                                            <h3>Paris, France</h3>
                                            <span>11 Jun 2020 - 22 Jun 2020</span>
                                            <h2>$835</h2>
                                        </div>
                                    </div>
                                    <div class="news-wrap">
                                        <div class="news-img">
                                            <img src="${pageContext.request.contextPath}/images/footer/img-2.jpg" alt="">
                                        </div>
                                        <div class="news-text">
                                            <h3>San Francisco</h3>
                                            <span>11 Jun 2020 - 22 Jun 2020</span>
                                            <h2>$835</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-6">
                                <div class="widget link-widget">
                                    <div class="widget-title">
                                        <h3>Useful Links</h3>
                                    </div>
                                    <ul>
                                        <li><a href="room.jsp">Our Offers</a></li>
                                        <li><a href="service.jsp">How Spread</a></li>
                                        <li><a href="userCenter.jsp">Our Event</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col col-lg-3 col-md-3 col-sm-6">
                                <div class="widget newsletter-widget">
                                    <div class="widget-title">
                                        <h3>Newsletter</h3>
                                    </div>
                                    <form>
                                        <div class="input-1">
                                            <input type="email" class="form-control" placeholder="Email Address *" required="">
                                        </div>
                                        <div class="submit clearfix">
                                            <button type="submit">subscribe<i class="ti-angle-right"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            </div>
                        </div> <!-- end container -->
                    </div>
                </div>
                    
                <div class="wpo-lower-footer">
                    <div class="container">
                        <div class="row">
                            <div class="col col-md-6 col-sm-6">
                                <div class="term">
                                    <ul>
                                        <li><a href="#">Privecy Policy</a></li>
                                        <li><a href="#">Terms & Condition</a></li>
                                        <li><a href="#">Cookies</a></li>
                                    </ul>
                                </div>
                            </div> 
                            <div class="col col-md-6 col-sm-6">
                                <p class="copyright">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- end wpo-site-footer -->
    </div>


    <!-- All JavaScript files
    ================================================== -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/owl.carousel.min.js"></script>

    <!-- Plugins for this template -->
    <script src="${pageContext.request.contextPath}/js/jquery-plugin-collection.js"></script>

    <script src="${pageContext.request.contextPath}/js/bootstrap-datepicker.min.js"></script>


    <!-- Custom script for this template -->
    <script src="${pageContext.request.contextPath}/js/script.js"></script>
</body>
</html>
